<template>
  <div id="home_index">
    <!--  轮播图部分  -->
    <el-carousel height="600px" @change="updateCurrentLunBoIndex" :interval="5000" indicator-position="none">
      <el-carousel-item class="lunbo_item" v-for="item in lunboList" :key="item.id">
        <img :src="item.cover"/>
      </el-carousel-item>
    </el-carousel>

    <!--  重要书籍  -->
    <ImportantInfo :home-title="lunboList[currentLunBoIndex].title" class="important_info"/>

    <!--  整个图书部分  -->
    <div class="home_body">
      <unit-title title="全部图书"/>
      <div class="home_body_mess">
        <book-obj v-for="item of bookList" :book-obj="item" :key="item.isbn"/>
      </div>
      <!--  分页器  -->
      <el-pagination
          class="pagination"
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="currentPageNumber"
          @current-change="currentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import ImportantInfo from "../HomeItem/ImportantInfo";
import UnitTitle from "../../components/UnitTitle";
import BookObj from "../../components/BookObj";
import {getAllBooks,getCarousel,findBookByLimit} from "../../network/home";
export default {
  name: "index",
  components: {
    BookObj,
    UnitTitle,
    ImportantInfo
  },
  data(){
    return{
      lunboList:[
        {imgTitle:""}
      ],
      currentLunBoIndex:0,
      bookList:[],
      total:0,//用于保存全部的书籍的数量
      currentPageNumber:1,//当前的页数
      dialogFormVisible:false,//是否开启二级菜单
      currentBookObj:{},//当前的图书信息，单击图书item时才会有值
    }
  },
  methods:{
    updateCurrentLunBoIndex(){
      this.currentLunBoIndex++;
      if (this.currentLunBoIndex>this.lunboList.length-1){
        this.currentLunBoIndex=0;
      }
    },
    // 获取全部轮播图
    findCarousel() {
      getCarousel().then((result)=>{
        console.log(result);
        this.lunboList=result.data.data;
      }).catch((reason)=>{
        console.log(reason);
      })
    },
    //单击分页器按钮时触发
    currentChange(size){//单击分页,别忘记重新请求数据
      if (size!==this.currentPageNumber){
        this.currentPageNumber=size;
        findBookByLimit((this.currentPageNumber-1)*10,10).then((result)=>{
          console.log(result);
          this.bookList=result.data.data;
        }).catch((reason)=>{
          console.log(reason);
        })
      }
    },
  },
  created() {
    //获取全部图书
    getAllBooks().then((result)=>{
      console.log(result);
      this.total=result.data.data.length;
    }).catch((reason)=>{
      console.log(reason);
    });
    this.findCarousel();//获取轮播图
    //this.bookList就是当前的图书集合，一次只展示 10 条
    findBookByLimit(0,10).then((result)=>{
      console.log(result);
      this.bookList=result.data.data;
    }).catch((reason)=>{
      console.log(reason);
    })
  }
}
</script>

<style scoped>
#home_index{
  position: relative;
  top: -60px;
}
.el-carousel__item img {
  width: 100%;
  height: 100%;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

/*二级弹窗的样式*/
.current_book li{
  display: flex;
  font-size: 16px;
  text-align: center;
  border-bottom: 1px solid #cccccc;
  margin: 5px 0;
  padding: 10px 5px;
}
.current_book li:last-child{
  position: relative;
  border: none;
}
.current_book li .current_book_left{
  flex: 1;
}
.current_book li .current_book_right{
  width: 600px;
}
.current_book li img{
  width: 180px;
}
.current_book_btn{
  position: relative;
  left: 50%;
  transform: translateX(-91%);
}

.home_body{
  position: relative;
  width: 80%;
  /*height: 500px;*/
  min-width: 400px;
  background: #ffffff;
  padding-top: 180px;
  margin: 0 auto;
}
.home_body_mess{
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 0 auto;
  justify-content: left;
}
.home_body_mess:after{
  content: '';
  flex: 3;
  /*justify-content: space-between;*/
}
/*分页器样式*/
.pagination{
  text-align: center;
}
</style>
